<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Traceability</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0 auto;
        }
        table{
            margin-top: 50px;
        }
        table td{
            font-size: 12px;
            padding: 5px 15px;
        }
        table input {
            font-size: 12px;
        }
        div{
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>10001: 白云药物公司 10002: 顺丰速运 10003: 工商银行 10004: 北京市人民医院</p>
        <table border="1" cellspacing="0">
            <tr>
                <td>单号</td>
                <td>备注</td>
                <td>金额</td>
                <td>疫苗数量</td>
                <td>物流号</td>
                <td>付款转账号</td>
                <td>还款转账号</td>
                <td>订单状态</td>
<!--                <td>创建时间</td>-->
<!--                <td>付款时间</td>-->
<!--                <td>应还款时间</td>-->
<!--                <td>实际还款时间</td>-->
                <td>供应商</td>
                <td>采购商</td>
                <td>金融机构</td>
                <td>物流商</td>
                <td>温度</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in transactionList">
                <td>{{item.id}}</td>
                <td>{{item.description}}</td>
                <td>{{item.value}}</td>
                <td>{{item.number}}</td>
                <td>{{item.shipment_number}}</td>
                <td>{{item.payment_tx_number}}</td>
                <td>{{item.repayment_tx_number}}</td>
                <td>{{item.status}}</td>
<!--                <td>{{item.create_date}}</td>-->
<!--                <td>{{item.payment_date}}</td>-->
<!--                <td>{{item.repayment_date}}</td>-->
<!--                <td>{{item.repay_date}}</td>-->
                <td>{{item.supplier}}</td>
                <td>{{item.company}}</td>
                <td>{{item.financial_org}}</td>
                <td>{{item.logística}}</td>
                <td>{{item.temperature}}</td>
                <td>
                    <a :href="'confirmOrder.html?id=' + item.id"><input type="button" value="确认订单" v-if="item.status=='新建（待确认）'"></a>
                    <a :href="'applypayOrder.html?id=' + item.id"><input type="button" value="申请代付" v-if="item.status=='新建（已确认）'"></a>
                    <a :href="'payOrder.html?id=' + item.id"><input type="button" value="代付" v-if="item.status=='申请代付'"></a>
                    <a :href="'confirmPay.html?id=' + item.id"><input type="button" value="确认收款" v-if="item.status=='已付款（未核实）'"></a>
                    <a :href="'updateOrder.html?id=' + item.id"><input type="button" value="通知发货" v-if="item.status=='已付款（已核实）'"></a>
                    <a :href="'confirmOrderTake.html?id=' + item.id"><input type="button" value="确认发货" v-if="item.status=='已发货（未核实）'"></a>
                    <a :href="'addTemperature.html?id=' + item.id"><input type="button" value="添加温度" v-if="item.status=='已发货（已核实）'&&item.temperature==''"></a>
                    <a :href="'confirmReceiving.html?id=' + item.id"><input type="button" value="确认收货" v-if="item.status=='已发货（已核实）'&&item.temperature!=''"></a>
                    <a :href="'repayOrder.html?id=' + item.id"><input type="button" value="还款" v-if="item.status=='已收货'"></a>
                    <a :href="'confirmrepay.html?id=' + item.id"><input type="button" value="确认收款" v-if="item.status=='已还款（未核实）'"></a>
                    <p v-if="item.status=='已还款（已核实）'">交易结束</p>
                </td>
            </tr>
        </table>
        <a href="createOrder.html"><input type="button" value="新建订单"></a>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data () {
            return {
                transactionList: null
            }
        },
        created(){
            let _this = this
            $.ajax({
                url: "http://localhost:8080/queryAllOrder",
                type: "GET",
                dataType: 'json',
                data:{},
                success: (res) => {
                    console.log(res)
                    _this.transactionList = res
                },
                error:()=>{
                    console.log("失败");
                }
            })
        },
        mounted(){

        },
        methods: {

        }
    })
</script>
</html>